import React from 'react'
import {useEffect,useState} from "react"
import {useDispatch,useSelector} from "react-redux"
function Anser() {
  let [result,setResult] = useState(0)
//   let [duoarr,setDuoarr] = useState([]) 
    let arr = []
  let store = useSelector((state)=>{
    return {
        ...state.Homereducer
    }
  })
  useEffect(()=>{
      console.log(store.arrcopy,11111);
      let ischecked =  store.arrcopy.filter(item=>item.zhen) // 过滤出做对的题
      let ischecked1 =  store.duoarr.filter(item=>item.zhen)
      let sum = ischecked.length * 10 + ischecked1.length * 10
      setResult(sum)
      
  },[])
  let radiofn = ()=>{

  }
  let checkboxfn = ()=>{

  }
  return (
    <div>
        <h2>您的成绩为<b style={{color:"red"}}>{result}</b>分</h2>
        <h3>单选题</h3>
        {
            store.arr && store.arr.length ? store.arr.map((item,index)=>{
                return <div key={index}>
                     <p>第{index+1}题 ：{item.tit}</p>   
                     <div>选项 :
                          {
                              item.answer && item.answer.length?  item.answer.map((v,i)=>{
                                  return <div key={i}><label><input type="radio" name={item.id} value={v.title} onChange={()=>radiofn(v.id,i)} disabled={true} checked={v.checked}/> {v.tit}</label></div>
                              }):"暂无选项"
                          }

                     </div>
                     <div>
                         <h4>正确选项
                             <br /> 
                           <p style={{marginLeft:"50px",color:"red"}}>
                                {
                                    item.answer && item.answer.length?  item.answer[item.rightkey].tit :""
                                }
                           </p>
                        
                         </h4>

                     </div>
                </div>
            }):"暂无试题"
        }
        <h3>多选题</h3>
        {
            store.duoarr && store.duoarr.length ? store.duoarr.map((item,index)=>{
                return <div key={index}>
                     <p>第{index+1}题 ：{item.tit}</p>   
                     <div>选项 :
                          {
                              item.answer && item.answer.length?  item.answer.map((v,i)=>{
                                  return <div key={i}><label><input type="checkbox" name={item.id} value={v.title} onChange={()=>checkboxfn(v.id,i)} checked={v.checked}  disabled={true}/> {v.tit}</label></div>
                              }):"暂无选项"
                          }
                     </div>
                     <div>
                         <h4>正确选项</h4>
                         {
                            item.rightkey && item.rightkey.length ?  item.rightkey.map((_,__)=>{
                                return <div key={__} style={{color:"red"}}>
                                      {
                                          item.answer[_].tit
                                      }
                                </div>
                            }):""
                         }
                     </div>
                </div>
            }):"暂无试题"
        }

    </div>
  )
}

export default Anser